<div nz-row class="main-row">
  <nz-card>
    <nz-tabset [nzTabPosition]="'left'">
      <nz-tab [nzTitle]="group.displayName" *ngFor="let group of featureList?.groups">
        <div nz-row class="feature-title">
          <label>
            {{ group.displayName }}
          </label>
        </div>
        <nz-divider></nz-divider>
        <div
          class="feature-item"
          nz-row
          *ngFor="let feature of group.features"
          [ngSwitch]="feature.valueType?.name"
        >
          <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
            <label nz-checkbox [(ngModel)]="feature.value">
              {{ feature.displayName }}
            </label>
            <small class="feature-checkbox-description" *ngIf="!!feature?.description">{{
              feature.description
            }}</small>
          </ng-container>
          <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
            <div class="form-group">
              <label>
                {{ feature.displayName }}
              </label>
              <input nz-input [(ngModel)]="feature.value" />
              <small class="feature-text-description" *ngIf="!!feature?.description">{{
                feature.description
              }}</small>
            </div>
          </ng-container>
          <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
            <label>
              {{ feature.displayName }}
            </label>
            <nz-select [(ngModel)]="feature.value">
              <nz-option
                *ngFor="let item of feature.valueType.itemSource?.items"
                [nzValue]="option.value"
                >{{
                  item.displayText?.resourceName + '::' + item.displayText?.name | abpLocalization
                }}
              </nz-option>
            </nz-select>
            <small class="feature-select-description" *ngIf="!!feature?.description">{{
              feature.description
            }}</small>
          </ng-container>
          <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
        </div>
      </nz-tab>
    </nz-tabset>
  </nz-card>
</div>
<div nz-row>
  <button nz-button nzType="primary" (click)="save()" [disabled]="!getChangedFeatures()?.length">
    保存
  </button>
  <button nz-button nzType="default" (click)="close()">关闭</button>
</div>
